<template>
  <view class="w-100% flex flex-col gap-10rpx">
    <view
      class="flex items-center justify-between text-28 color-#4d4d4d"
    >
      <view>{{ name }}</view>
      <view>{{ num }}</view>
    </view>
    <view
      class="w-100% relative h-20 border-rd-40rpx"
      :style="{'background-color': lineBgColor}"
    >
      <view
        class="absolute animation top-0 bottom-0 left-0 border-rd-40rpx"
        :style="{width: num,'background-color': lineColor}"
      />
    </view>
  </view>
</template>

<script setup>
defineProps({
  name: {
    type: String,
    default: ''
  },
  num: {
    type: String,
    default: ''
  },
  lineColor: {
    type: String,
    default: '#fbbbd3'
  },
  lineBgColor: {
    type: String,
    default: '#ffe6ef'
  }
})
</script>

<style lang="scss" scoped>
.animation {
  transition: width 0.3s;
}
</style>
